<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText" :dateStr="dateStr"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="区域" class="row-padding-bottom">
              <el-cascader
                v-model="areaId"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                placeholder="请选择"
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="行业" class="row-padding-bottom">
              <el-cascader
                v-model="industryId"
                :options="industryOptionsNC"
                @change="getIndustryId"
                clearable
                filterable
                placeholder="请选择"
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <!-- <el-form-item>
              <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button>
          </el-form-item> -->
          <el-button
            type="primary"
            icon="icon iconfont iconchazhao1"
            @click="searchList"
            class="searchBtn"
            style="margin-right: 12px"
          >
            <span>搜索</span>
          </el-button>
          <!-- <el-form-item>
            <el-button
              class="commonBut saveBtn funComBut"
              icon="icon iconfont icondaochu"
              @click="exportExcel"
            >
              <span class="opetareText">导出报表</span>
            </el-button>
          </el-form-item> -->
          <el-form-item>
            <exportBtn
              :dataLen="dataList.length"
              :filterField="filterField"
              api="api-s/report/export_JC_NC_OVERVIEW"
            ></exportBtn>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
        style="padding-bottom: 24px"
      >
        <el-table
          :data="dataList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          v-loading="loading"
          stripe
          style="border: 1px solid #dfe6ec"
          :max-height="tableHeight"
        >
          <el-table-column
            prop="areaName"
            label="区域"
            min-width="80"
            align="center"
            fixed
          ></el-table-column>
          <el-table-column
            prop="companyTotal"
            label="单位总数（个）"
            min-width="140"
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <span>单位总数（个）</span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="tip[scope.$index - 1]"
                placement="top"
              >
                <span class="icon iconfont icontishi"></span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="empTotal"
            label="务工人数（人）"
            min-width="140"
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <span>务工人数（人）</span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="tip[scope.$index - 1]"
                placement="top"
              >
                <span class="icon iconfont icontishi"></span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="isAttTotal"
            label="考勤单位数（个）"
            min-width="160"
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <span>考勤单位数（个）</span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="tip[scope.$index - 1]"
                placement="top"
              >
                <span class="icon iconfont icontishi"></span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="attTotal"
            label="考勤总数（条）"
            min-width="140"
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <span>考勤总数（条）</span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="tip[scope.$index - 1]"
                placement="top"
              >
                <span class="icon iconfont icontishi"></span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="isSalaryTotal"
            label="代发单位数（个）"
            min-width="160"
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <span>代发单位数（个）</span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="tip[scope.$index - 1]"
                placement="top"
              >
                <span class="icon iconfont icontishi"></span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="isAccountComTotal"
            label="专户数（个）"
            min-width="130"
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <span>专户数（个）</span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="tip[scope.$index - 1]"
                placement="top"
              >
                <span class="icon iconfont icontishi"></span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="saAmountComTotal"
            label="代发金额（万元）"
            min-width="160"
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <span>代发金额（万元）</span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="tip[scope.$index - 1]"
                placement="top"
              >
                <span class="icon iconfont icontishi"></span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="saEmpComTotal"
            label="代发人次（次）"
            min-width="140"
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <span>代发人次（次）</span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="tip[scope.$index - 1]"
                placement="top"
              >
                <span class="icon iconfont icontishi"></span>
              </el-tooltip>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
      </div>
      <!-- <el-col :span="24" class="toolbar" style="text-align:right">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo"
                       :page-size="pageSizeNumber" layout="total, sizes, prev, pager, next, jumper" :total="total"
                       ref="pagination" ></el-pagination>
      </el-col> -->
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
import { mapActions, mapState } from 'vuex'
import common from '../../kits/common'
export default {
  name: 'dataOverView',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '数据概览',
      dateStr: '',
      //表格数据
      dataList: [],
      isShow: false, //列表加载
      loading: true,
      //分页
      pageNo: 1,
      total: 0,
      pageSizeNumber: 20,
      areaId: '',
      industryId: '',
      //下拉框数据
      //查询条件数据封装
      //搜索条件
      filterField: {
        areaId: '',
        industryId: '',
      },
      //表头标注
      tip: [
        '区域和行业范围内的单位总数，以统一社会信用代码去重',
        '区域和行业范围内的单位员工总数，不去重',
        '区域和行业范围内有考勤记录的单位数量，以统一社会信用代码去重',
        '区域和行业范围内的单位员工考勤总条数，1次考勤算做1条',
        '区域和行业范围内的有实发工资记录的单位数量，以统一社会信用代码去重',
        '区域和行业范围内的工资专户总数，1个单位对应1个专户',
        '区域和行业范围内的单位工资实发金额之和，精确到小数点后2位',
        '区域和行业范围内的单位工资实发总人次，1条实发记录算1个人次',
      ],
      // tableHeight:0
    }
  },
  computed: { ...mapState(['areasOptions', 'industryOptionsNC']) },

  created() {
    this.dateStr = ''
    this.getdataList()
    //初始化选择列表
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    this.getIndustryNC({})
    //   this.$nextTick(function () {
    //     this.tableHeight = $(".mainCon").height() - 170;
    //   })
  },
  methods: {
    ...mapActions(['getAreas', 'getIndustryNC']),
    getdataList() {
      this.axios({
        method: 'post',
        url: 'api-s/nc/companystats/expand/overview',
        data: this.filterField,
      })
        .then(
          (response) => {
            this.dataList = response.data.result.results.results
            this.editable = new Array(this.dataList.length)
            this.total = response.data.result.results.total
            this.dateStr = response.data.result.updateTime
            this.loading = false
            if (this.dataList.length < 1) {
              this.isShow = true
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //每页显示多少条
    handleSizeChange(val) {
      // 选中条数变为第一页
      this.pageNo = 1
      this.pageSizeNumber = val
      this.getdataList(this.pageNo, val)
    },
    //显示第几页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.getdataList(val, this.pageSizeNumber)
    },
    //获取选中的区域最后一级id
    getAreaId() {
      if (this.areaId.length > 0) {
        var areaId = this.areaId[this.areaId.length - 1]
        this.filterField.areaId = areaId
      } else {
        this.filterField.areaId = ''
      }
    },
    //获取选中的行业最后一级id
    getIndustryId() {
      if (this.industryId.length > 0) {
        var industryId = this.industryId[this.industryId.length - 1]
        this.filterField.industryId = industryId
      } else {
        this.filterField.industryId = ''
      }
    },
    // 搜索
    searchList() {
      this.getdataList()
    },
    exportExcel() {
      if (this.dataList.length > 0) {
        window.location.href =
          common.commonApi +
          'api-s/nc/companystats/expand/export?areaId=' +
          this.filterField.areaId +
          '&industryId=' +
          this.filterField.industryId +
          '&access_token=' +
          localStorage.getItem('access_token')
      } else {
        this.$message({
          type: 'warning',
          message: '无数据导出',
        })
      }
    },
  },
}
</script>

<style scoped lang="less">
/* 页面top 顶部栏样式 */
.container /deep/ .topTitle .btn {
  top: 11px;
}
.container /deep/ .topTitle .dateShow {
  top: 9px;
}
.mainCon {
  top: 198px;
  padding: 24px 0 0 0;
}
@import '../../../static/css/filterArea.less';
</style>
